import React, { Component } from 'react';
import { observer } from 'mobx-react';
import { Steps, Icon, Tools } from "weaver-mobile";
import Qa from "./Qa";
import QaVerify from "./QaVerify";
import Finish from "./Finish";

const Step = Steps.Step;
const getLabel = Tools.getLabel;

@observer
export default class Setting extends Component {
    render() {
        const steps = [{
            key: '1',
        }, {
            key: '2',
        }, {
            key: '3',
        }].map(data => <Step key={data.key} />);

        const { store: { current, stepTitle, iconColor, handleIconBtnClick, stepBtns } } = this.props;

        return (
            <div className="secSetting">
            	<div className="upper">
	            	<Steps current={current} direction="horizontal">{steps}</Steps>
	            	<div className="stepTitle">
	            		<div>
	            			<div className="am-steps-item-icon">
	            				<span className="am-steps-icon">{current + 1}</span>
	            			</div>
	            			<span>{stepTitle}</span>
	            		</div>
	            		{ (current == 0) && <div>{["batch-addition-1","copy","batch-deletion"].map( (type,index) => <Icon type={type} size="xs" color={iconColor[index]} key={type} onClick={() =>{  iconColor[index] != "#999" && handleIconBtnClick(index)} }/>)}</div> }
	            	</div>
	            	{ current == 1 && <p>{getLabel('386517',"以下是您刚刚设置的密保问题，请依次做出回答，以便进行确认")}</p>}
            	</div>
            	<div className={`down ${current == 2 ? "white" : ""}`}>
            		{ current == 0 && <Qa store={this.props.store}/> }
					{ current == 1 && <QaVerify store={this.props.store}/> }
					{ current == 2 && <Finish /> }
            	</div>
            	<div className="foot">
					{stepBtns.length ? stepBtns.map( (btn,index) => <div key={index} style={{width: `${100 / stepBtns.length}%`, display:"inline-block"}}>{btn}</div>) : stepBtns}
            	</div>
            </div>
        );
    }
}